<div
  v-kb-modal="isShow"
  class="modal fade"
  data-backdrop="static"
  data-keyboard="false"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" @click="reset"
          ><i class="fa fa-close"></i
        ></button>
        <h4 class="modal-title">{{ Kooboo.text.common.Relation }}</h4>
      </div>
      <div class="modal-body">
        <div class="table-responsive">
          <table class="table table-striped table-hover">
            <thead>
              <tr>
                <th>{{ Kooboo.text.common.name }}</th>
                <th>{{ Kooboo.text.common.remark }}</th>
                <th class="table-action">{{ Kooboo.text.common.edit }}</th>
              </tr>
            </thead>
            <template v-if="!loading">
              <tbody v-if="relations.length">
                <tr v-for="$data in relations" :key="$data.url">
                  <td>
                    <a
                      :href="$data.url"
                      v-kb-tooltip:right="Kooboo.text.common.preview"
                      target="_blank"
                      >{{ $data.name }}</a
                    >
                  </td>
                  <td>{{ $data.remark || "-" }}</td>
                  <td>
                    <a
                      v-show="!!getRelationEditUrl($data)"
                      :href="getRelationEditUrl($data)"
                      target="_blank"
                      class="btn btn-xs blue"
                      ><i class="fa fa-pencil"></i
                    ></a>
                  </td>
                </tr>
              </tbody>
              <tbody v-else>
                <tr>
                  <td colspan="100" class="text-center">{{
                    Kooboo.text.common.empty
                  }}</td>
                </tr>
              </tbody>
            </template>
            <tfoot v-else>
              <tr>
                <td colspan="100" class="text-center">
                  <i class="fa fa-spinner fa-spin"></i>
                  {{ Kooboo.text.common.loading }}
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button @click="reset" class="btn btn-default">{{
          Kooboo.text.common.OK
        }}</button>
      </div>
    </div>
  </div>
</div>
